import React,{useEffect, useState} from 'react';
import { Table, Button, TablePaginationConfig, notification,Input,Breadcrumb,Switch,Form,Modal,Image,Card } from 'antd'
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { pro_showdata,pro_detail,pro_updateFlag } from '../../../api/api';
interface Props{

}
interface DataType {
    originprice: number;
    sales: number;
    name: string;
    phone: string;
    role: string;
    key: string;
    isseckill:string;
    isrecommend:string;
    issale:string
}
function Recommend(props:Props) {
  //决定了每一列渲染什么数据
  const columns: ColumnsType<DataType> = [
    {
        title:'序号',
        dataIndex:'index',
        render:(text,record,index)=>`${index+1}`
    },
    {
        title: '图片',//表格列的名字(显示在表格头上)
        dataIndex: 'img1',//数据对应的属性名
        render:(_,record:any,key)=>(
            <>
                <img src={record.img1} alt="" width='100' height='100' />
            </>
        )

    },
    {
        title: '商品名',
        dataIndex: 'proname',
        key: 'role',
    },
    {
        title:'品牌',
        dataIndex:'brand',
        key:'brand'
    },
    {
        title:'分类',
        dataIndex:'category',
        key:'category'
    },
    {
        title:'折扣',
        dataIndex:'discount'
    },
    {
        title:'销量',
        dataIndex:'sales',
        sorter: (a, b) => a.sales - b.sales,
    },
    {
        title: '价格',
        dataIndex: 'originprice',
        key: '_id',
        sorter: (a, b) => a.originprice - b.originprice,

    },
    {
        title:'是否推荐',
        render:(_,record:any) =>(
            record.isrecommend == '1' ?
            <Switch defaultChecked onChange={()=>{onClick(record)}}/> 
            :
            <Switch/>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record:any, key) => (
            <>
            {/* <Switch checkedChildren="推荐" unCheckedChildren="秒杀" defaultChecked /> <br/> */}
            <Button type='primary'className='detail' onClick={()=>{showModal(record)}}>详情</Button>
            </>
        )
    }
]
// 获取推荐列表
var [recommendList,setList] = useState([])
const [isModalOpen, setIsModalOpen] = useState(false);
const [detail,setDetail] = useState<any>({})
useEffect (()=> { 
   pro_showdata({type:'isrecommend',flag:1}).then((res)=>{
    console.log(res.data);
    setList(res.data.data)
   })
},[])
const showModal = (record:any) => {
    pro_detail({proid:record.proid}).then((res)=>{
      console.log(res.data.data[0]);
      setDetail(res.data.data[0])
    })  
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 修改秒杀状态
  const onClick = (record:any)=>{
    pro_updateFlag({proid:record.proid,type:'isrecommend',flag:false}).then((res)=>{
        console.log(res.data);
        notification.success({message:'已修改推荐状态'})
        
    })
    pro_showdata({type:'isrecommend',flag:1}).then((res)=>{
        setList(res.data.data)
       })
}
return (
    <div className='seckill'>
         <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
          <Breadcrumb.Item>产品管理</Breadcrumb.Item>
          <Breadcrumb.Item>推荐列表</Breadcrumb.Item>
        </Breadcrumb>
        <div className="opet">
            {/* <Search style={{ width: 300, marginRight: 20 }} placeholder="输入商品名称"  enterButton />  */}
        </div>
        <Modal title="商品详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <div className="detail">
                <Image
                  width={200}
                  src={detail.img1}
                />
                <Card>
                    <p>{detail.desc}</p>
                </Card>
            </div>
        </Modal>
        {/* 表格组件 */}
        {/* columns 表格每一列如何渲染 */}
        {/* dataSource 表格的数据源 */}
        <Table columns={columns}  dataSource={recommendList} />
    </div>
);
}



export default Recommend;